<template>
  <div class="content-table">
    <el-table :data="parcel" :key="channel" v-if="['lehui', 'shanhui'].includes(channel)" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="150" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="100" prop="origin" label="实付金额"></el-table-column>
      <el-table-column width="100" prop="actual_commission" label="实扣佣金"></el-table-column>
      <el-table-column width="100" prop="money" label="实收金额"></el-table-column>
      <el-table-column width="100" prop="pay_total" label="支付金额"></el-table-column>
      <el-table-column width="100" prop="commission" label="应扣佣金"></el-table-column>
      <el-table-column width="80" prop="pay_code" label="支付码"></el-table-column>
      <el-table-column width="80" label="是否到账">
        <template slot-scope="scope">
          <div class="green" v-if="scope.row.state == 'already'">已到账</div>
          <div class="red"  v-if="scope.row.state == 'not_match'">到账金额不符</div>
          <div class="orange"  v-if="scope.row.state == 'not_already'">未到账</div>
        </template>
      </el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="dianping" v-if="channel == 'dianping'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="150" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="100" prop="origin" label="实付金额"></el-table-column>
      <el-table-column width="100" prop="actual_commission" label="实扣佣金"></el-table-column>
      <el-table-column width="100" prop="money" label="实收金额"></el-table-column>
      <el-table-column width="100" prop="pay_total" label="支付金额"></el-table-column>
      <el-table-column width="100" prop="commission" label="应扣佣金"></el-table-column>
      <el-table-column width="70" prop="pay_type" label=预订方式"></el-table-column>
      <el-table-column width="70" prop="pay_type" label=订单方式"></el-table-column>
      <el-table-column width="70" prop="order_no" label=订单号/团购券号"></el-table-column>
      <el-table-column width="70" prop="pay_code" label="支付码"></el-table-column>
      <el-table-column width="80" label="是否到账">
        <template slot-scope="scope">
          <div class="green" v-if="scope.row.state == 'already'">已到账</div>
          <div class="red"  v-if="scope.row.state == 'not_match'">到账金额不符</div>
          <div class="orange"  v-if="scope.row.state == 'not_already'">未到账</div>
        </template>
      </el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="cash" v-if="channel == 'cash'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="150" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="100" prop="pay_total" label="实付金额"></el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="POS" v-if="channel == 'POS'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="150" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="100" prop="pay_total" label="实付金额"></el-table-column>
      <el-table-column width="100" prop="commission" label="佣金金额"></el-table-column>
      <el-table-column width="100" prop="actual_total" label="实收金额"></el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="refund" v-if="channel == 'refund'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="150" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="100" prop="refund_total" label="退款金额"></el-table-column>
      <el-table-column width="100" prop="remarks" label="退款原因"></el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="free" v-if="channel == 'free'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="150" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="100" prop="pay_type" label="优惠项"></el-table-column>
      <el-table-column width="100" prop="number" label="数量"></el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="reconciliation_1" v-if="channel == 'reconciliation_1'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      sdfsdfsfd
      <el-table-column width="50" prop="" label="渠道">
        <template slot-scope="scope">
          <div v-if="scope.row.channel == 'lehui'">乐惠</div>
          <div v-if="scope.row.channel == 'dianping'">大众点评</div>
        </template>
      </el-table-column>
      <el-table-column width="150" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="100" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="100" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="120" prop="show_time" label="场次时间"></el-table-column>
      <el-table-column width="80" prop="origin" label="实付金额"></el-table-column>
      <el-table-column width="80" prop="actual_commission" label="实扣佣金"></el-table-column>
      <el-table-column width="80" prop="money" label="实收金额"></el-table-column>
      <el-table-column width="80" prop="pay_total" label="支付金额"></el-table-column>
      <el-table-column width="80" prop="commission" label="应扣佣金"></el-table-column>
      <el-table-column width="80" prop="pay_code" label="支付码"></el-table-column>
      <el-table-column width="80" label="是否到账">
        <template slot-scope="scope">
          <div class="green" v-if="scope.row.state == 'already'">已到账</div>
          <div class="red"  v-if="scope.row.state == 'not_match'">到账金额不符</div>
          <div class="orange"  v-if="scope.row.state == 'not_already'">未到账</div>
        </template>
      </el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="parcel" key="reconciliation_0" v-if="channel == 'reconciliation_0'" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="200" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="160" prop="date" label="场次日期"></el-table-column>
      <el-table-column width="150" prop="show_time" label="时间"></el-table-column>
      <el-table-column width="100" prop="actual_persons" label="开场人数"></el-table-column>
      <el-table-column width="100" prop="booking_persons" label="预订人数"></el-table-column>
      <el-table-column width=""  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pager :total="total" v-if="!!total" @upload="pagerChange"></pager>
  </div>
</template>

<script>
  import pager from '@/components/pager';
  export default {
    name: "financalList",
    props:['parcel','channel','total'],
    components:{pager},
    data() {
      return {
        cellStyle:{
          "color":"#000",
          "fontSize":"14px"
        },
        loading:true
      }
    },

    methods: {
      headStyle(){
        return 'background: #F2F2F2;font-size: 14px;color: #9E9E9E;'
      },
      edit(item,row){
        this.$emit('upload',{item,row});
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }){
        if(columnIndex == 3 ){
          if(rowIndex == 0){
            return{
              rowspan:6,
              colspan:1
            }
          }
        }
      },
      lookDetail(row){
        window.open(`/admin/finance/index.html?theme_id=${row.theme_id}&date=${row.date}&theme_time_id=${row.theme_time_id}&shop_id=${row.shop_id}&edit=true`);
      },
      pagerChange(obj){
        this.$emit('upload',obj);
      }
    }
  }
</script>

<style scoped lang = "scss">
  .content-table{

  }
  .m-panel{
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
  }
</style>
